<template>
  <div class="menu">
    <el-menu router :collapse="true" :unique-opened="true" :default-active="tagCurrent.value" class="el-menu-vertical-demo">
      <asideItem v-for="item in menuList" :key="item.id" :items="item"></asideItem>
    </el-menu>
    <industryDialog :dialogVisible.sync="dialogVisible" @onEditIndustry="onEditIndustry" />
  </div>
</template>
<script>
import menuItem from "./menuItem";
import { mapState } from "vuex";
import industryDialog from '../views/myAccountViewAccount/components/industryDialog.vue';
export default {
  name: "sideMenu",
  components: {
    asideItem: menuItem,
    industryDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  computed: {
    ...mapState({
      tagCurrent: (state) => state.tag.tagCurrent,
      menuList: (state) => state.common.menuList,
      userInfo: state => state.common.userInfo,
    }),
  },
  methods: {
    onEditIndustry(industryid) {
      let params = {
        industryid,
        isOpenWatermark: this.userInfo.isOpenWatermark
      };
      this.$api.publicApi.EditIndustryOrWatermark(params).then(res => {
        let { data, message, status } = res.data;
        if (status == 200) {
          this.$message({
            message,
            type: 'success'
          });
          this.dialogVisible = false;
          this.userInfo.industryid = params.industryid;
          this.$store.dispatch("GetUserInfo", this.userInfo);
        }else{
          this.$message({
            message,
            type: 'warning'
          });
        }

      }).catch(() => {

      });
    },
  },
  created() {
    if (!this.userInfo.industryid) {
      this.dialogVisible = true;
      return;
    }
  },
};
</script>
<style lang="less" scope>
.menu {
  height: 100%;
  position: relative;
  .help {
    color: #4c7ae8;
    position: absolute;
    width: 100%;
    font-size: 13px;
    line-height: 2;
    .callMe {
      text-align: center;
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
    > p {
      text-align: center;
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
      .iconfont {
        font-size: 17px;
      }
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    height: auto;
    overflow: hidden;
  }
  .el-submenu__title {
    min-width: auto;
    box-sizing: border-box;
  }
}
// 左侧导航条的样式
.el-menu {
  border: none;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .menuItem {
    height: 14.29%;
    min-height: 100px;
    li {
      position: relative;
      height: 100%;
      &:hover {
        background: #ecf5ff;
      }
      > .navContent,
      > .el-submenu__title {
        width: 76px;
        height: 70px;
        line-height: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -38px;
        margin-top: -35px;
        text-align: center;
        padding: 0 !important;
        &:hover {
          background: #ecf5ff;
          // background: #FFFFFF;
        }
        > .iconfont {
          font-size: 32px;
          color: #000;
        }
        > span {
          visibility: visible !important;
          font-size: 16px;
          height: auto !important;
          width: auto !important;
          color: #333;
          visibility: visible;
          display: block !important;
          margin-top: 10px;
        }
      }
    }
  }
  .menuItem1 {
    width: 100%;
    height: 56px;
    li {
      height: 100%;
    }
  }
}

.callMeContent {
  padding: 10px 15px;
  font-size: 13px;
}
.el-menu--popup {
  min-width: 150px;
}
// .el-menu--popup li:hover {
//   background: #ECF5FF;
// }
.el-menu > li:hover .iconfont,
.el-menu > li:hover .navWords {
  color: #39a4ed;
}
.el-menu .is-active {
  // background-color: #ECF5FF;
  .iconfont,
  .navWords {
    color: #39a4ed !important;
  }
}
.menu {
  position: relative;
}
/*1024*/
@media screen and (min-width: 0) and (max-width: 1329px) {
  .menu .help {
    bottom: 10px;
  }
}

/*1366*/
@media screen and (min-width: 1330px) and (max-width: 1367px) {
  .menu .help {
    bottom: 10px;
  }
}

/*1440*/
@media screen and (min-width: 1368px) and (max-width: 1479px) {
  .menu .help {
    bottom: 25px;
  }
}

/*1920*/
@media screen and (min-width: 1480px) {
  .menu .help {
    bottom: 25px;
  }
}
</style>
